<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="注册成功.html">			
		用户名:<input type="text" name="username" id="input1" /><br />
		密码:<input type="text" name="password" id="input2"/><br />
		重复密码:<input type="text" name="password2" id="input3"/><br />
		邮箱:<input type="text" name="email" id="input4"/><br />
		电话号码:<input type="text" name="phone" id="input5"/><br />
		<input type="submit" />
		<input type="reset" />
		</form>
		<script>
			input1.onfocus=function(){
				var obj=event.target;
				obj.style.backgroundColor="#ff0000";
			}
			input1.onblur=function(){
				var obj=event.target;
				obj.style.backgroundColor="#ffffff";
			}
			input5.onkeydown=function(e){
				console.log(e.key);
				console.log(e.keyCode);
				if(e.keyCode<48 || e.keyCode>57){
					event.preventDefault()
				}
			}
						// 练习:
						// 编写一个用户注册页面
						// 用户名
						// 密码
						// 重复密码
						// 邮箱
						// 电话号码
						
						
						// 1. 表单元素获得焦点时背景颜色变深，失去焦点时变浅
						// 2. 用户输入用户名后，使用onchange 检测用户名长度是否大于>6
						// 3. 检测密码和重复密码是否一致
						// 4. 电话号码只允许输入数字
						// 5. 表单提交时，检测输入是否正确，正确可提交看,不正确不可以提交
						 
		</script>
	</body>
</html>
